<template>
  <div class="header">
    <div class="logo">
      <img src="../assets/logo.png" alt="logo" style="width: 100%; height: 100%;">
    </div>
    <div class="navigation">
      <div class="navigation_bar">
        <el-menu mode="horizontal" background-color="rgba(0, 0, 0, 0)" text-color="#fff" router default-active="/homePage">
          <el-menu-item index="/homePage">首页</el-menu-item>
          <el-menu-item index="/knowledge">必备知识</el-menu-item>
          <el-menu-item index="/personal">个人中心</el-menu-item>
          <el-menu-item index="/recruitment">招聘信息</el-menu-item>
          <el-menu-item index="/interaction">师生互动</el-menu-item>
        </el-menu>
	<!-- 	<el-dropdown>
			<span class="el-dropdown-link">
			      师生互动
			      <el-icon class="el-icon--right">
			        <arrow-down />
			      </el-icon>
			    </span>
				<template #dropdown>
				      <el-dropdown-menu>
				        <el-dropdown-item>课堂指导</el-dropdown-item>
				      </el-dropdown-menu>
				    </template>
		</el-dropdown> -->
      </div>
      <div class="navigation_search">
        <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" size="small"></el-input>
      </div>
      <div class="navigation_login" text-color="#fff">
        <el-button class="login" size="large" type="text" @click="toLogin">登录</el-button>
        <el-button class="register" size="large" type="text" @click="toRegister">注册</el-button>
      </div>
    </div>
  </div>
  <div class="main">
    <router-view></router-view>
  </div>
  <div class="footer"></div>
</template>

<script>
  import { useRouter } from 'vue-router'
  export default {  
    setup() {
      const router = useRouter()
      const toLogin = () => { 
        router.push('/login')
      }
      const toRegister = () => { 
        router.push('/register')
      }
      return {  
        toLogin,
        toRegister
      }
    }
  }
</script>

<style lang="less" scoped>
  .header {
    height: 140px;
    background-color: #1fab89;
  }

  .logo {
    width: 491px;
    height: 80px;
  }

  .navigation {
    height: 60px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 10%;
  }

  .navigation_bar {}

  .el-menu {
    width: 460px;
  }

  // 去除菜单边框线
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }

  .navigation_search {
    margin-left: 30px;
  }
  
  .el-input { 
    border-radius: 20px;
  }

  .navigation_login {
    margin-left: 50px;
  }
  
  .el-button { 
    font-size: 14px;
    color: #fff;
  }
  
  .register { 
    margin-left: 25px;
  }
  
  .footer { 
    height: 400px;
    background-color: #1fab89;
  }
</style>
